<template>
  <div class="tech-support-container bg-white p-6 rounded-lg shadow-lg max-w-4xl mx-auto my-8">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">技术支持</h1>
    
    <div class="tech-content text-gray-700 space-y-6">
      <p class="text-lg">欢迎使用宠多多APP！我们为您提供全方位的技术支持服务，确保您能够顺利使用我们的产品。以下是我们使用的主要三方接口信息：</p>
      
      <div class="overflow-x-auto">
        <table class="min-w-full bg-white border border-gray-200">
          <thead>
            <tr class="bg-gray-100">
              <th class="py-3 px-4 border-b border-r text-left text-gray-700 font-semibold">三方接口</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="3" class="py-4 px-4 border-b border-gray-200">
                <table class="min-w-full">
                  <thead>
                    <tr class="bg-gray-50">
                      <th class="py-2 px-4 border-b border-r text-left text-gray-600 font-semibold">接口名称</th>
                      <th class="py-2 px-4 border-b border-r text-left text-gray-600 font-semibold">接口功能</th>
                      <th class="py-2 px-4 border-b text-left text-gray-600 font-semibold">网站地址</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="hover:bg-gray-50">
                      <td class="py-3 px-4 border-b border-r text-blue-600 font-medium">短信发送</td>
                      <td class="py-3 px-4 border-b border-r">阿里云短信服务</td>
                      <td class="py-3 px-4 border-b">
                        <a href="https://www.aliyun.com/" target="_blank" class="text-blue-600 hover:underline">https://www.aliyun.com/</a>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                      <td class="py-3 px-4 border-b border-r text-blue-600 font-medium">文件存储</td>
                      <td class="py-3 px-4 border-b border-r">阿里云oss</td>
                      <td class="py-3 px-4 border-b">
                        <a href="https://www.aliyun.com/" target="_blank" class="text-blue-600 hover:underline">https://www.aliyun.com/</a>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                      <td class="py-3 px-4 border-b border-r text-blue-600 font-medium">消息推送</td>
                      <td class="py-3 px-4 border-b border-r">腾讯云即时通讯IM</td>
                      <td class="py-3 px-4 border-b">
                        <a href="https://cloud.tencent.com/document/product/269/10162" target="_blank" class="text-blue-600 hover:underline">https://cloud.tencent.com/document/product/269/10162</a>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                      <td class="py-3 px-4 border-b border-r text-blue-600 font-medium">实名认证</td>
                      <td class="py-3 px-4 border-b border-r">阿里云望里实名认证以及人脸</td>
                      <td class="py-3 px-4 border-b">
                        <a href="https://wface.market.alicloudapi.com" target="_blank" class="text-blue-600 hover:underline">https://wface.market.alicloudapi.com</a>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                      <td class="py-3 px-4 border-b border-r text-blue-600 font-medium">外卖物流</td>
                      <td class="py-3 px-4 border-b border-r">快递100</td>
                      <td class="py-3 px-4 border-b">
                        <a href="https://api.kuaidi100.com/manager/v2/myinfo/enterprise" target="_blank" class="text-blue-600 hover:underline">https://api.kuaidi100.com/manager/v2/myinfo/enterprise</a>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                      <td class="py-3 px-4 border-b border-r text-blue-600 font-medium">即时通讯</td>
                      <td class="py-3 px-4 border-b border-r">腾讯云即时通讯IM</td>
                      <td class="py-3 px-4 border-b">
                        <a href="https://cloud.tencent.com/document/product/269/10162" target="_blank" class="text-blue-600 hover:underline">https://cloud.tencent.com/document/product/269/10162</a>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                      <td class="py-3 px-4 border-b border-r text-blue-600 font-medium">连连支付</td>
                      <td class="py-3 px-4 border-b border-r">支付</td>
                      <td class="py-3 px-4 border-b">
                        <a href="https://www.lianlianpay.com/home" target="_blank" class="text-blue-600 hover:underline">https://www.lianlianpay.com/home</a>
                      </td>
                    </tr>
                     <tr class="hover:bg-gray-50">
                      <td class="py-3 px-4 border-b border-r text-blue-600 font-medium">内容审核</td>
                      <td class="py-3 px-4 border-b border-r">用户发布动态和评论内容的审核</td>
                      <td class="py-3 px-4 border-b">
                        <a href="https://console.cloud.tencent.com/cms" target="_blank" class="text-blue-600 hover:underline">https://console.cloud.tencent.com/cms</a>
                      </td>

                    </tr>
                      <tr class="hover:bg-gray-50">
                      <td class="py-3 px-4 border-b border-r text-blue-600 font-medium">高德定位</td>
                      <td class="py-3 px-4 border-b border-r">定位服务</td>
                      <td class="py-3 px-4 border-b">
                        <a href="https://lbs.amap.com/" target="_blank" class="text-blue-600 hover:underline">https://lbs.amap.com/</a>
                      </td>
                    </tr>
                     <tr class="hover:bg-gray-50">
                      <td class="py-3 px-4 border-b border-r text-blue-600 font-medium">腾讯云点播</td>
                      <td class="py-3 px-4 border-b border-r">短视频服务</td>
                      <td class="py-3 px-4 border-b">
                        <a href="ttps://console.cloud.tencent.com/vod/overview" target="_blank" class="text-blue-600 hover:underline">ttps://console.cloud.tencent.com/vod/overview</a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="mt-8 bg-blue-50 p-4 rounded-lg border border-blue-200">
        <h2 class="text-lg font-semibold text-blue-800 mb-2">联系我们</h2>
        <p class="mb-2">如果您在使用过程中遇到任何技术问题，欢迎通过以下方式联系我们的技术支持团队：</p>
        <ul class="space-y-1 ml-4 list-disc">
          <li>工作时间：周一至周六 9:00-18:00</li>
          <li>电子邮箱：chongduoduo2025@163.com</li>
          <li>在线客服：APP内"我的-联系客服"</li>
        </ul>
      </div>
    </div>
    
    <button class="mt-8 px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors" @click="goBack">
      返回
    </button>
  </div>
</template>

<script>
export default {
  name: 'TechSupport',
  methods: {
    goBack() {
      window.history.back();
    }
  }
}
</script>

<style scoped>
.tech-support-container {
  line-height: 1.6;
}

h1 {
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

table {
  border-collapse: collapse;
}

th, td {
  word-break: break-all;
}

button {
  cursor: pointer;
}

@media (max-width: 640px) {
  .tech-support-container {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
  
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}
</style>